<template>
    <div class="rx-form">
        <el-form ref="form" :rules="rules" :model="formData" label-width="80px">
            <el-form-item label="权重" prop="weight">
                <el-input v-model.number="formData.weight" placeholder="请输入权重数值"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                                    <el-button @click="closeDialogProcess()">取 消</el-button>
                                    <el-button type="primary" @click="onSubmit">保 存</el-button>
                                 </span>
    </div>
</template>

<script>
    export default {
        name: "RxForm",
        props: {
            data: {
                type: Object,
                default: {}
            }
        },
        data() {
            var validatePass = (rule, value, callback) => {
                if (value > 100) {
                    callback(new Error('权重不能超过100'));
                }
                callback();
            };
            return {
                formData: {
                    weight: 0,
                },
                rules: {
                    weight: [
                        {validator: validatePass},
                    ],
                }
            }
        },
        mounted() {
            this.formData.weight = this.data.colWeight
        },
        methods: {
            onSubmit() {

                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        this.data.colWeight = this.formData.weight;
                        this.$emit('click-save-form', this.data)
                        this.data.weight = 0
                    } else {
                        return false;
                    }
                })
            },
            closeDialogProcess() {
                this.data.weight = 0
                this.$emit('close-dialog-process-form')
            },
        }
    }
</script>

<style scoped>
    .dialog-footer {
        display: flex;
        justify-content: flex-end;
    }

    .rx-form /deep/ .el-input__inner {
        padding-left: 10px;
    }
</style>
